
let _ctx;
let _datas;
let _msg;
let _avatars;

const canvas = wx.getSharedCanvas();
let canvasHeight = canvas.height;

// 排行榜滚动偏移
let offsetY = 0;
// 每页显示的个数
let pageItemCount = 6;
// 每页显示的可视个数
let pageItemOneCount = 5;
// 每个宽度
let itemWidth = 500;
// 每个高度
let itemHeight = 130;
// 最大高度
let maxHeight = 100;
// 排行榜数据
let gameDatas = [];


const itemBg = wx.createImage();
itemBg.src = 'wx-sub/assets/bg_1.png';




const isEmptyNum = (num)=>{
	return num === undefined || num === null;
};


// 绘制一项
const drawRankItem = (ctx, index, rank, data, startY, prevOffsetY, isMine)=>{
	const nick = data.nickname.length <= 10 ? data.nickname : data.nickname.substr(0, 10) + "...";
    const itemGapY = itemHeight * index - startY;
    const score = data.score || 0;

    ctx.drawImage(itemBg, _msg.itemBgRect.x, itemGapY + _msg.itemBgRect.y, _msg.itemBgRect.w, _msg.itemBgRect.h);

    // 名次
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "left";
    ctx.baseLine = "middle";
    ctx.font = `${_msg.indexFontSize}px Helvetica`;
    ctx.fillText(data.index, _msg.indexPos.x, itemGapY + _msg.indexPos.y);

    //名字
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "left";
    ctx.baseLine = "middle";
    ctx.font = `${_msg.nicknameFontSize}px Helvetica`;
    ctx.fillText(nick, _msg.nicknamePos.x, itemGapY + _msg.nicknamePos.y);

    // 头像
    if (_avatars[data.openid]) {
    	ctx.drawImage(_avatars[data.openid], _msg.avatarRect.x, itemGapY + _msg.avatarRect.y, _msg.avatarRect.w, _msg.avatarRect.h);
    } else {
    	const img = wx.createImage();
    	img.src = data.avatarUrl;
    	img.onload = ()=> {
    		_avatars[data.openid] = img;
    		ctx.drawImage(_avatars[data.openid], _msg.avatarRect.x, itemGapY + _msg.avatarRect.y, _msg.avatarRect.w, _msg.avatarRect.h);
    	}
    }

    // 分数
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "right";
    ctx.baseLine = "middle";
    ctx.font = `${_msg.scoreFontSize}px Helvetica`;
    ctx.fillText(`${score}`, _msg.scorePos.x, itemGapY + _msg.scorePos.y);
};

// 显示排行
const showRank = ()=>{
	const startY = offsetY % itemHeight;
    const startIndex = Math.floor(offsetY / itemHeight);
    const stopIndex = startIndex + pageItemCount + (startY == 0 ? 0 : 1);
    const datas = gameDatas.slice(startIndex, stopIndex);

    _ctx.clearRect(0, 0, _msg.canvasWidth, _msg.canvasHeight);
    for (let i = 0, len = datas.length; i < len; i++) {
        drawRankItem(_ctx, i, startIndex + i + 1, datas[i], startY, offsetY, false);
    }
};

// 绘制排行榜
const onDrawRank = ()=>{
	if (!_datas) {
		return;
	}
	itemWidth = _msg.itemWidth || 600;
	itemHeight = _msg.itemHeight || 140;
	pageItemCount = _msg.pageItemCount || 6;
	pageItemOneCount = _msg.pageItemOneCount || 5;
	maxHeight = itemHeight * _datas.length;
	canvasHeight = _msg.canvasHeight || canvasHeight;
	gameDatas = _datas;


	// 样式
	if (isEmptyNum(_msg.indexFontSize)) {
		_msg.indexFontSize = 50;
	}
	if (!_msg.indexPos) {
		_msg.indexPos = {x: 30, y: 80};
	}
	if (isEmptyNum(_msg.nicknameFontSize)) {
		_msg.nicknameFontSize = 50;
	}
	if (!_msg.nicknamePos) {
		_msg.nicknamePos = {x: 260, y: 80};
	}
	if (!_msg.avatarRect) {
		_msg.avatarRect = {x: 120, y: 20, w: 100, h: 100};
	}
	if (!_msg.itemBgRect) {
		_msg.itemBgRect = {x: 0, y: 5, w: 600, h: 130};
	}
	if (isEmptyNum(_msg.scoreFontSize)) {
		_msg.scoreFontSize = 50;
	}
	if (!_msg.scorePos) {
		_msg.scorePos = {x: 670, y: 80};
	}


	showRank();
};

// 滚动
const onScroll = (moveY)=>{
	const newOffsetY = offsetY + moveY;
	// 前后滑动到尽头
	// if (newOffsetY < 0 || newOffsetY > pageItemOneCount * itemHeight) {return;}
	if (newOffsetY < 0 || newOffsetY > maxHeight - canvasHeight) {return;}

	// 更新新的偏移
	offsetY = newOffsetY;

	// 更新显示
	showRank();
};

const init = (ctx, datas, msg, avatars)=>{
	_ctx = ctx;
	_datas = datas;
	_msg = msg;
	_avatars = avatars;

	msg.isDebug && console.log(datas);

	onDrawRank();
};

module.exports = {
	init,
	onDrawRank,
	onScroll,
};